<template>
  <div>
      <!-- 全局 -->
        <div class="login" v-if="isHide">
            <!-- 头部 -->
            <headJump title="网易严选"/>
            <!-- 登录 -->
            <div class="logo">
                <!-- logo图片 -->
                <div class="logoimage">
                    <img src="https://yanxuan.nosdn.127.net/static-union/164793255107785e.png" alt="">
                </div>
                <!-- 登录按钮 -->
                <div class="loginbutton">
                    <van-button @click="gotologin" size="large" color='red'><van-icon class="icon" name="orders-o" />手机号快捷登录</van-button>
                    <van-button color='red' size="large" plain><van-icon class="icon" name="envelop-o" />邮箱账号登录</van-button>
                </div>
            </div>
            <!-- 底部 -->
            <div class="bottom">
                <div class="text">
                    <span><van-icon name="wechat" />微信</span><span class="spanto"><van-icon name="bell" />QQ</span><span><van-icon name="gem" />微博</span>
                </div>
            </div>
        </div>
        <!-- //登录页面组件 -->
        <loginPage v-else/>
  </div> 
</template>
<script>
import loginPage from './loginpage/index.vue'
export default {
  name:'loGin',
  data() {
    return {
      isHide:1
    }
  },
  components:{
    loginPage
  },
  mounted() {
    this.$bus.$on('switchlgin',(v)=>{
      this.isHide = v
    })
  },
  methods: {
    //前往注册
    gotologin(){
      this.isHide = 0
    }
  },
}
</script>

<style lang='less' scoped>
.login{
  width: 100%;
  height: 100%;
  position: relative;
  background-color: rgb(238, 238, 238);

  //中间登录按钮logo
  .logo{
      width: 100%;
      margin-top: 1rem;
      text-align: center;
      .loginbutton{
         margin: auto;
         width: 90%; 
         button{
             margin: 0.2rem 0;
             border-radius: 0.1rem;
             .icon{
                 font-weight: 900;
                 margin: 0 0.2rem;
             }
         }
      }
      .logoimage{
         img{
             margin: 1rem;
             width: 3.5rem;
         }
      }
  }
  //底部其他登陆方式
  .bottom{
    width: 100%;
    height: 100%;
    background-color: rgb(241, 241, 241);
    position: absolute;
    .text{
        width:7rem ;
        margin: auto;
        bottom: 1rem;
        font-size: 0.4rem;
        margin-top: 7.5rem;
        margin-left: 2rem;
        color: rgb(165, 161, 161);
        .spanto{
            height: 1rem;
            margin: 0 0.5rem ;
            padding:0 0.5rem ;
            border-left: 0.05rem solid rgb(199, 193, 193);
            border-right: 0.05rem solid  rgb(212, 212, 212);
       
        }
    }

  }
}
</style>